<style>
    .tabs{
        background: #fff;
        margin-top: 20px;
    }
    .tabs-content{
        display: flex;
        flex-direction: column-reverse;
        padding-top: 20px;
        width: 95%;
        margin: auto;
        width: 80%;
        margin: auto;
    }
    .tabs-content .tab .left{
        width: 50%;
        float: left;
    }
    .tabs-content .tab .right{
        width: 25%;
        float: left;
        margin-left: 20px;
    }
    .tabs-content .tab .zhong{
        width: 25%;
        float: left;
    }
    .tab-labels{
        /*padding: 10px;*/
        box-sizing: border-box;
        background: #e3eced;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
    }
    .tab-labels .xian {
        width: 8px;
        height: 20px;
        background: #18bc9c;
        margin-right: 10px;
        margin-left: 10px;
    }

    .tabs .col-sm-2{
        width: 100%;
        text-align: left;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="tabs">
        <div class="tab-labels">
            <div class="xian"></div>
            搜索旧系统服务单
        </div>
        <div class="tabs-content">
            <div id="tab1" class="tab active">
                <div class="left">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('车架号或车牌号')}:</label>
                        <div class="col-xs-12 col-sm-12">
                            <input id="title" class="form-control" name="title" type="text" value="">
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="form-group " style="margin-top: 21px;padding-bottom: 50px;">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12  col-sm-12" style="margin: auto;">
                            <button  class="tab-label1 btn btn-primary btn-embossed" style="width:100px;" type="button" onclick="xiayibu()">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    function xiayibu(){
        if($('#title').val()==""){
            layer.alert("车架号或车牌号为空！");
            return false;
        }
        var formData = $("#add-form").serialize();
        $.ajax({
            type: 'get',
            url: "{:url('old/one/chaxun')}", //发送路径
            data: formData, //发送的数据
            async: true, //是否异步
            beforeSend:function(){
                //显示正在加载数据
                loadIndex = layer.msg('搜索中', {icon: 16,time:false,shade:0.01});
            },
            success: function (res) {
                layer.close(loadIndex);
                if (res.code == 1) {
                    // 假设有一个closeMessage函数来关闭弹窗
                    layer.msg('搜索成功，正在跳转', {icon: 1,time:2000});
                    setTimeout(function() {
                        layer.closeAll()
                        parent.layer.closeAll();
                        parent.$("#table").bootstrapTable('refresh', {});
                        parent.Backend.api.open("{:url('old/one/details')}?ids="+res.data.id, '浏览', {area: ['100%', '100%']});
                    }, 2000);
                } else {
                    layer.alert(res.msg)
                }
            }
        })

    }

</script>
